<template>
  <div class="page">
    <el-button type="primary" @click="showAdd()">
      新增
    </el-button>

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="guideType"
        label="类型"
        width="100">
        <template slot-scope="scope">
          {{scope.row.guideType | guideTypeFilter}}
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="zititle"
        label="副标题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="mark"
        label="正文"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="mark"
        label="操作"
        width="180">
        <template slot-scope="{ row }">
          <el-button type="text" size="mini" @click="showAdd(row)">编辑</el-button>
          <el-button type="text" class="danger" size="mini" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="pageNoChange"
        :current-page.sync="page.pageNo"
        :page-size="page.pageSize"
        layout="total, prev, pager, next"
        :total="page.total">
      </el-pagination>
    </div>

    <el-dialog
      :title="form.id ? '编辑' : '新增'"
      :visible.sync="dialogVisible"
      fullscreen>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="资讯类型">
          <el-select class="w200" v-model="form.guideType" placeholder="请选择资讯类型">
            <el-option v-for="(item, key) in types" :key="key" :label="item" :value="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload
            class="avatar-uploader"
            :action="imagesUploadApi"
            :headers="{Authorization: 'Bearer ' + this.$store.getters.token}"
            :show-file-list="false"
            accept="image/*"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.imageurl" :src="form.imageurl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="标题">
          <el-input class="w200" v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="副标题">
          <el-input class="w200" v-model="form.zititle"></el-input>
        </el-form-item>
        <el-form-item label="正文">
          <div ref="editor" class="text" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-loading="loading" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { guideConfig,guideConfigAdd,guideConfigEdit,guideConfigDelete,  } from '@/api/official/official'
import { mapGetters } from 'vuex'
import { upload } from '@/utils/upload'
import E from 'wangeditor'
const types = {
  // 1-公告 2-资讯 3-用药指导指南  4-检查指南  5-检验指南 、6体检指南 、7 住院指南  8 门诊指南  9医保指南
  1: '公告',
  2: '资讯',
  3: '用药指导指南',
  4: '检查指南',
  5: '检验指南',
  6: '体检指南',
  7: '住院指南',
  8: '门诊指南',
  9: '医保指南'
}
export default {
  name: 'InternetHospitalMangeNotice',
  filters: {
    guideTypeFilter(val) {
      return types[val]
    }
  },
  computed: {
    ...mapGetters([
      'imagesUploadApi',
      'baseApi'
    ])
  },
  data() {
    return {
      types,
      loading: false,
      dialogVisible: false,
      form: {},
      tableData: [],
      page:{
        total:0,
        pageSize:10,
        pageNo:1,

      },
    };
  },

  mounted() {
    this.guideConfig()
  },

  methods: {
    guideConfig() {
      const data = {
        // hospitalId: 1,
        page: this.page.pageNo,
        size: this.page.pageSize
      }
      guideConfig(data).then(res => {
        console.log(res)
        this.tableData = res.content
        this.page.total = res.totalElements
      })
    },
    pageSizeChange(val){
      this.page.pageSize = val;
      this.guideConfig();
    },
    pageNoChange(val){
      this.page.pageNo = val;
      this.guideConfig();
    },
    handleAvatarSuccess(res, file) {
      // this.form.imageurl = URL.createObjectURL(file.raw);
      // this.form.imageurl = this.baseApi + '/file/' + res.data.path
      this.$set(this.form, 'imageurl', this.baseApi + '/file/' + res.data.path)
    },
    beforeAvatarUpload(file) {
      const supportedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'];
      const isValidType = supportedTypes.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 50;

      if (!isValidType) {
        this.$message.error('上传封面只能是图片格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传封面图片大小不能超过 50MB!');
      }
      return isValidType && isLt2M;
    },
    showAdd(form = {}) {
      this.dialogVisible = true;
      this.form = form
      this.$nextTick(() => {
        const _this = this
        var editor = new E(this.$refs.editor)
        // 自定义菜单配置
        editor.customConfig.zIndex = 10
        // 文件上传
        editor.customConfig.customUploadImg = function(files, insert) {
          // files 是 input 中选中的文件列表
          // insert 是获取图片 url 后，插入到编辑器的方法
          files.forEach(image => {
            upload(_this.imagesUploadApi, image).then(res => {
              const data = res.data
              const url = _this.baseApi + '/file/' + data.data.path
              insert(url)
            })
          })
        }
        editor.customConfig.onchange = (html) => {
          this.form.mark = html
        }
        editor.create()
        // 初始化数据
        editor.txt.html(this.form.mark || '')
      })
    },
    submit() {
      this.loading = true
      if (this.form.id) {
        guideConfigEdit(this.form).then(res => {
          this.$message.success('修改成功')
        }).finally(() => {
          this.loading = false
          this.dialogVisible = false
          this.guideConfig()
        })
      } else {
        guideConfigAdd(this.form).then(res => {
          this.$message.success('添加成功')
        }).finally(() => {
          this.loading = false
          this.dialogVisible = false
          this.guideConfig()
        })
      }
    },
    handleDelete(row) {
      const data = {
        ids: row.id
      }
      guideConfigDelete(data).then(res => {
        this.$message.success('删除成功')
        this.guideConfig()
      })
    }
  },
};
</script>

<style scoped>
.page {
  padding: 24px;
}
.danger {
  color: #f56c6c;
}
.w200 {
  width: 200px;
}

/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border-radius: 0;
}
</style>